<template>
  <div class="children_classify">
    <router-link
      v-for="(item,index) in cc_data.results"
      :key="index"
      :to="{ name: 'xiandu_children', params: { id: item.id }}"
    >
      <img :src="'https://images.weserv.nl/?url='+item.icon" alt />
    </router-link>
    <v-load v-show="load_flag"></v-load>
  </div>
</template>
<script>
import { mapState, mapActions, mapMutations } from "vuex";
const vLoad = () => import("../components/load.vue");
export default {
   components: {
    vLoad
  },
  data() {
    return {};
  },
  props: ["en_name"],
  computed: {
    ...mapState("xiandu", ["cc_data"]),
    ...mapState("load", ["load_flag"])
  },
  watch: {
    en_name(newValue, oldValue) {
      this.en_name = newValue;
      this.$store.dispatch("xiandu/getChildrenClassifyData", {
        en_name: this.en_name
      });
    }
  },
  created() {
    this.$store.dispatch("xiandu/getChildrenClassifyData", {
      en_name: this.en_name
    });
  }
};
</script>
<style lang="scss" scoped>
.children_classify {
  padding: 0.5rem 0.2rem;
  overflow: hidden;
  img {
    float: left;
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    margin: 0.2rem;
  }
}
</style>
